<template>
	<div class="tuikuan">
		<pubHead title="申请退款"></pubHead>
		<div class="goods_infos flexv mt2">
		    <p class="head">商品信息</p>
		    <div v-for="(item,index) in orderInfo.sub" :key="index">
		        <div>
		        	<div class="flex goods-title ali-c">
		        		<img src="@/assets/e_shop@2x.png" />
		        		{{item.merchant_name}}
		        	</div>
		        </div>
				<div class="goods_box flex" v-for="(item1,index1) in item.goods" :key="index1">
					<img :src="item1.images" class="goods_img" alt="">
					<div class="goods_info flex1 flexv jus-b">
					    <p class="twoline title">{{item1.goods_name}}</p>
					    <span class="spec" v-if="item1.key_name">{{item1.key_name}}</span>
					
					    <div class=" ali-b jus-b others">
					        <span class="price">￥{{item1.goods_price}}</span>
					        <span class="num">x{{item1.total_num}}</span>
					    </div>
					</div>
				</div>
		    </div>
		    <div class="totals jus-b ali-b">
		        <span class="">实付款</span>
		        <span class="total_price">￥{{orderInfo.total_price}}</span>
		    </div>
		</div>
		<div class="tuikuan-center">
			<div class="tuikuan-1 flex jus-b">
				<p class="tuikuan-1-l">退款原因</p>
				<p class="tuikuan-1-r flex ali-c" @click="choose">{{text}}<van-icon size="0.28rem" color="#999" name="arrow" /></p>
			</div>
			<div class="tuikuan-2">
				<p>退款金额：<span style="color:#EE1C1A;">￥{{orderInfo.total_price}}</span></p>
			</div>
			<div class="tuikuan-3 flex">
				退款说明：<input v-model="myreason" placeholder="选填" />
			</div>
		</div>
		<div style="margin-top: 0.2rem;margin-bottom: 0.88rem;background-color: #FFFFFF;padding: 0.3rem;border-bottom: 0.01rem solid #e3e3e3;">
			<p style="margin-bottom: 0.2rem;">上传凭证：</p>
			<van-uploader :before-delete="beforeDele" :after-read="afterRead"  v-model="fileList" multiple />
		</div>
		<div class="show-footer" @click="toEvaluate">
			提交申请
		</div>
		<van-popup position="bottom" v-model="show" class="show">
			<div class="show-title">
				退款原因
			</div>
			<div class="show-b flex jus-b" v-for="(item,index) in reason" :key="index" @click="changeC(item,index)">
				<p>{{item.name}}</p>
				<img v-if="item.check" src="@/assets/my_check.png" />
				<img v-else src="@/assets/check.png" />
			</div>
			<div class="show-f" @click="confirm">
				确定
			</div>
		</van-popup>
	</div>
</template>

<script>
	import Vue from 'vue';
	import pubHead from '@/components/head';
	import { Icon } from 'vant';
	import { Uploader } from 'vant';
	import { Popup } from 'vant';
	import {upLoad,ApplyAfterSale} from '@/request/api.js';
	Vue.use(Icon).use(Uploader).use(Popup);
	export default{
		components:{
			 pubHead
		},
		data(){
			return{
				orderInfo:'',
				value:5,
				content:'',
				fileList:[],
				goodsInfo:{},
				imgList:[],
				show:false,
				text:'请选择',
				myreason:'',
				reason:[
					{name:'7天无理由退换货',check:true},
					{name:'退运费',check:false},
					{name:'颜色/尺寸/参数不符',check:false},
					{name:'商品瑕疵',check:false},
					{name:'质量问题',check:false}
				]
			}
		},
		created() {
			let data = this.$route.query.data
			this.orderInfo = JSON.parse(data)
			console.log(this.orderInfo)
		},
		methods:{
			changeC(item,index){
				this.reason.forEach((item)=>item.check=false)
				this.reason[index].check = true
			},
			confirm(){
				let a = this.reason.map(item=>{
					if(item.check==true)
					{
						return item.name
					}
				})
				this.text = a.filter(Boolean).join()
				this.show = false
			},
			choose(){
				this.show = true
			},
			afterRead(file) {
				let that = this
				var formData = new FormData();
				formData.append('file',file.file)
			      upLoad(formData).then(res=>{
					  if(res.code==1){
						 that.imgList.push(res.data)
						 console.log(that.imgList)
					  }else{
						  this.$tip('上传图片的格式有误！')
					  }
				  })
			},
			beforeDele(index,file){
				console.log(file)
				this.imgList.splice(file.index,1)
				return true
			},
			imgPreview(file,index) {
			    let self = this;
			    let Orientation;
			    //去获取拍照时的信息，解决拍出来的照片旋转问题
			    Exif.getData(file, function() {
			        Orientation = Exif.getTag(this, "Orientation");
			    });
			    // 看支持不支持FileReader
			    if (!file || !window.FileReader) {
			        Toast.clear();
			        this.$tip('很抱歉，您的设备不支持FileReader!');
			        return
			    };
			
			    if (/^image/.test(file.type)) {
			        // 创建一个reader
			        let reader = new FileReader();
			        // 将图片2将转成 base64 格式
			        reader.readAsDataURL(file);
			        // 读取成功后的回调
			        reader.onloadend = function() {
			            let result = this.result;
			            let img = new Image();
			            img.src = result;
			            //判断图片是否大于100K,是就直接上传，反之压缩图片
			            if (this.result.length <= 100 * 1024) {
			                self.postImg(this.result,index);
			            } else {
			                img.onload = function() {
			                let data = self.compress(img, Orientation);
			                self.postImg(data,index);
			                };
			            }
			        };
			    }   
			},
			toEvaluate(){
				let that = this
				let id = []
				that.orderInfo.sub.map(item=>{
					item.goods.map(child=>{
						id.push(child.id)
					})
				})
				let ID = id.join()
				console.log(ID)
				ApplyAfterSale({
					token:localStorage.getItem('token'),
					order_id:that.orderInfo.id,
					order_goods_id:ID,
					remark:that.text,
					description:that.myreason,
					img:that.imgList.join(),
				}).then(res=>{
					if(res.code==1){
						this.$tip('提交成功，稍后跳转到我的订单')
						setTimeout(()=>{
							that.$router.replace('feature?id=1')
						},1000)
					}else{
						that.$tip(res.msg)
					}
				})
				
			}
			
		},
	}
</script>

<style lang="less">
	.tuikuan{
		min-height: 100vh;
		background-color: #f5f5f5;
		// 商品信息
		.goods_infos{
		    padding: 0.3rem;
		    background-color: #fff;
			.goods-title{
				color: #333;
				font-size: 0.32rem;
				margin-bottom: 0.2rem;
				margin-top: 0.3rem;
				img{
					width: 0.36rem;
					height: 0.32rem;
					margin-right: 0.1rem;
				}
			}
		    .head{
		        font-size: 0.28rem;
		        line-height: 120%;
		        color: #333;
		    }
		    .goods_box{
		        margin-top: 0.3rem;
		        .goods_img{
		            width: 1.8rem;
		            height: 1.8rem;
		            border-radius: 0.1rem;
					margin-right: 0.2rem;
		        }
		        .tuikuan{
		            margin-left: 0.2rem;
		            .title{
		                font-size: 0.28rem;
		                line-height: 150%;
		                color: #333;
		            }
		            .spec{
		                margin-right: auto;
		                font-size: 0.24rem;
		                line-height: 120%;
		                color: #999;
		            }
		            .others{
		                .price{
		                    font-size: 0.28rem;
		                    line-height: 120%;
		                    color: #ee1a1c;
		                }
		                .num{
		                    font-size: 0.28rem;
		                    line-height: 120%;
		                    color: #333;
		                }
		            }
		        }
		    }
		    .totals{
		        margin-top: 0.3rem;
		        font-size: 0.28rem;
		        line-height: 120%;
		        color: #333;
		        .total_price{
		            font-size: 0.36rem;
		            line-height: 120%;
		            color: #ee1a1c;
		        }
		    }
		}
		.tuikuan-center{
			background-color: #fff;
			padding: 0.2rem 0.3rem;
			margin-top: 0.2rem;
			.tuikuan-1{
				height: 0.8rem;
				font-size: 0.28rem;
				line-height: 0.8rem;
				.tuikuan-1-r{
					color: #999;
				}
			}
			.tuikuan-2{
				height: 0.8rem;
				line-height: 0.8rem;
				font-size: 0.28rem;
				
			}
			.tuikuan-3{
				height: 0.8rem;
				line-height: 0.8rem;
				font-size: 0.28rem;
				width: 100%;
				input{
					width: 77%;
					outline: none;
					border: none;
				}
			}
		}
		.show{
			padding: 0.2rem 0.3rem;
			padding-bottom: 0.88rem;
			background-color: #fff;
			.show-title{
				font-size: 0.32rem;
				text-align: center;
				line-height: 0.8rem;
			}
			.show-b{
				padding: 0.3rem 0;
				border-bottom:0.01rem solid #EDEDED;
				img{
					width: 0.36rem;
					height: 0.36rem;
				}
				p{
					font-size: .28rem
				}
			}
			.show-f{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				height: 0.88rem;
				background-color: #57B127;
				color: #fff;
				text-align: center;
				line-height: 0.88rem;
				
			}
		}
		.show-footer{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 0.88rem;
			background-color: #57B127;
			color: #fff;
			text-align: center;
			line-height: 0.88rem;
			
		}
	}
</style>
